<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="w-nav-height w-content-box web-me">
    <TopVideo :videos="videos" />
    <br>
    <br>
    <br>
    <!--头像-->
    <a-row :gutter="16">
      <a-col span="5">
        <div class="home-icon">
          <img :src="meData.home_icon" class="w-round" width="120" height="120">
          <a :href="meData.home_jianli" class="home-jianli">
            <a-icon type="paper-clip" />
          </a>
        </div>
      </a-col>
      <a-col span="15">
        <h2 class="home-title">
          {{ meData.home_title }}
        </h2>
      </a-col>
    </a-row>
    <!--关于我-->
    <a-divider>关于我</a-divider>
    <a-row :gutter="16" class="about">
      <a-col span="15">
        <p v-for="(v, k) in meData.abouts.split('\n')" :key="k" class="text-cell">
          {{ v }}
        </p>
      </a-col>
      <a-col span="9">
        <ul class="product">
          <li
            v-for="(v, k) in products"
            :key="k"
            class="cell w-pointer w-hover-float-shadow"
            @click="productClick(v)"
          >
            <w-image :url="v.cover" class="w-round" width="120" height="120" />
          </li>
        </ul>
      </a-col>
    </a-row>
    <!--专业技能-->
    <a-divider>专业技能</a-divider>
    <a-row :gutter="16" class="skills">
      <a-col span="12">
        <p v-for="(v, k) in meData.expertise.split('\n')" :key="k" class="text-cell">
          {{ v }}
        </p>
      </a-col>
      <a-col span="12">
        <skills-chart ref="skills-chart" :chart-data="meData.skills" />
      </a-col>
    </a-row>
    <!--工作经验-->
    <a-divider>工作经验</a-divider>
    <a-row :gutter="16" class="study">
      <a-col span="8">
        <p
          v-for="(v, k) in meData.experience_show.split('\n')"
          :key="k"
          class="text-cell"
        >
          {{ v }}
        </p>
      </a-col>
      <a-col span="16">
        <ul class="list w-flex-between">
          <li
            v-for="(v, k) in studys"
            :key="k"
            class="w-image-fit w-round cell w-pointer"
          >
            <figure
              v-lazy:background-image="imageFill(v.pic, 240, 200)"
              class="alephent-card w-pointer w-image-fit"
              @click="studyCellClick(v)"
            >
              <figcaption>
                <h3>{{ v.title }}</h3>
                <p>{{ v.describe }}</p>
              </figcaption>
            </figure>
          </li>
        </ul>
      </a-col>
    </a-row>
    <!--公司-->
    <a-divider>公司</a-divider>
    <a-row :gutter="16" class="work">
      <a-col span="10">
        <p
          v-for="(v, k) in meData.works_show.split('\n')"
          :key="k"
          class="text-cell"
        >
          {{ v }}
        </p>
      </a-col>
      <a-col span="14">
        <ul class="list w-flex-between">
          <li
            v-for="(v, k) in meData.works"
            :key="k"
            v-lazy:background-image="imageFill(v.icon, 200, 200)"
            class="cell w-image-fit w-pointer"
            @click="workItemClick(v)"
          >
            <p class="title w-flex-center">
              {{ v.name }}
            </p>
            <a-icon class="info-icon" type="exclamation-circle" @click.stop="workInfoClick(v)" />
          </li>
        </ul>
      </a-col>
    </a-row>
    <w-modal
      ref="WModal_Work"
      :title="workPopItem.name"
      :footer-hide="true"
      hide-footer
    >
      <p>
        时间：{{ workPopItem.startTime | DateFormat('YYYY/MM/DD') }}
        -
        {{ workPopItem.endTime | DateFormat('YYYY/MM/DD') }}
      </p>
      <p>职责：{{ workPopItem.obligation }}</p>
      <p>说明：{{ workPopItem.detail }}</p>
    </w-modal>
    <br>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Api } from '@/config/api'
import SkillsChart from '@/components/web/me/skillsChart'
import TopVideo from '@/components/web/me/video'
import { videoFrame } from '@/utils/filters/oss'
import Work from '@/models/work'
import WModal, { ModalComType } from '@/components/global/modal'
import ProductModel from '@/models/product'
import StudyModel from '@/models/study'

@Component({
  layout: 'web',
  name: 'WebMe',
  components: {
    SkillsChart,
    TopVideo,
    WModal
  },
  fetch ({ store }) {
    store.commit('app/SET_NAV_INDEX', '/web/me')
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await Promise.all([
      $wAxios.$get(Api.me.detail),
      $wAxios.$get(Api.product.me),
      $wAxios.$get(Api.study.me)
    ])
    const videos = data[0].home_videos.map((item: string) => {
      return {
        video: item,
        img: videoFrame(item, 200, 100)
      }
    })
    return { meData: data[0], products: data[1], studys: data[2], videos }
  },
  head () {
    return {
      title: '我于杀戮之中盛放，亦如黎明中的花朵'
    }
  }
})
export default class WebMe extends Vue {
  workPopItem: Work | object = {}

  /**
   * 工作按钮点击
   */
  workItemClick (item: Work) {
    window.open(item.url)
  }

  /**
   * 工作信息点击
   */
  workInfoClick (item: Work) {
    this.workPopItem = item;
    (this.$refs.WModal_Work as ModalComType).show()
  }

  /**
   * 作品点击
   */
  productClick (item: ProductModel) {
    this.$router.push(`/web/product/${item._id}`)
  }

  studyCellClick (item: StudyModel) {
    this.$router.push(`/web/study/${item._id}`)
  }
}
</script>

<style scoped lang="less">
.web-me {
  .home-icon {
    position: relative;
    width: 200px;
    .home-jianli {
      position: absolute;
      right: 0;
      bottom: 0;
      font-size: 30px;
      color: darkslategrey;
    }
  }
  .text-cell {
    font-size: 14px;
  }
  .about {
    .product {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .cell {
        width: 120px;
        height: 120px;
      }
      .cell:nth-child(n + 4) {
        margin-top: 20px;
      }
    }
  }
  .study {
    .list {
      flex-wrap: wrap;
      .cell {
        width: 240px;
        height: 200px;
      }
      .cell:nth-child(n + 4) {
        margin-top: 20px;
      }
    }
    .alephent-card {
      width: 100%;
      height: 200px;
      color: #ffffff;
      font-family: "Source Sans Pro", sans-serif;
      font-size: 16px;
      margin: 0px;
      overflow: hidden;
      position: relative;
      text-align: left;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    .alephent-card *,
    .alephent-card *:before,
    .alephent-card *:after {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      -webkit-transition: all 0.45s ease;
      transition: all 0.45s ease;
    }

    .alephent-card:before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      content: "";
      background-color: #090d77;
      opacity: 0.5;
      -webkit-transition: all 0.45s ease;
      transition: all 0.45s ease;
    }

    .alephent-card:after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      content: "";
      background-color: #031f46;
      opacity: 0.5;
      -webkit-transition: all 0.45s ease;
      transition: all 0.45s ease;
    }

    .alephent-card:before {
      -webkit-transform: skew(30deg) translateX(-80%);
      transform: skew(30deg) translateX(-80%);
    }

    .alephent-card:after {
      -webkit-transform: skew(-30deg) translateX(-70%);
      transform: skew(-30deg) translateX(-70%);
    }

    .alephent-card figcaption {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      z-index: 1;
      padding: 20px;
    }

    .alephent-card figcaption:before,
    .alephent-card figcaption:after {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #b81212;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
      content: "";
      opacity: 0.5;
      z-index: -1;
    }

    .alephent-card figcaption:before {
      -webkit-transform: skew(30deg) translateX(-100%);
      transform: skew(30deg) translateX(-100%);
    }

    .alephent-card figcaption:after {
      -webkit-transform: skew(-30deg) translateX(-90%);
      transform: skew(-30deg) translateX(-90%);
    }

    .alephent-card h3,
    .alephent-card p {
      margin: 0;
      opacity: 0;
      letter-spacing: 1px;
    }

    .alephent-card h3 {
      font-size: 20px;
      font-weight: 700;
      line-height: 26px;
      text-transform: uppercase;
    }

    .alephent-card p {
      font-size: 14px;
      line-height: 20px;
      margin-top: 8px;
    }

    .alephent-card a {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }

    .alephent-card:hover h3,
    .alephent-card.hover h3,
    .alephent-card:hover p,
    .alephent-card.hover p {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 0.9;
      -webkit-transition-delay: 0.2s;
      transition-delay: 0.2s;
    }

    .alephent-card:hover:before,
    .alephent-card.hover:before {
      -webkit-transform: skew(30deg) translateX(-20%);
      transform: skew(30deg) translateX(-20%);
      -webkit-transition-delay: 0.05s;
      transition-delay: 0.05s;
    }

    .alephent-card:hover:after,
    .alephent-card.hover:after {
      -webkit-transform: skew(-30deg) translateX(-10%);
      transform: skew(-30deg) translateX(-10%);
    }

    .alephent-card:hover figcaption:before,
    .alephent-card.hover figcaption:before {
      -webkit-transform: skew(30deg) translateX(-40%);
      transform: skew(30deg) translateX(-40%);
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s;
    }

    .alephent-card:hover figcaption:after,
    .alephent-card.hover figcaption:after {
      -webkit-transform: skew(-30deg) translateX(-30%);
      transform: skew(-30deg) translateX(-30%);
      -webkit-transition-delay: 0.1s;
      transition-delay: 0.1s;
    }
  }
  .work {
    .list {
      flex-wrap: wrap;
      .cell {
        overflow: hidden;
        width: 200px;
        height: 200px;
        position: relative;
        > .title {
          position: absolute;
          width: 100%;
          bottom: -200px;
          height: 100%;
          font-size: 18px;
          color: rgba(0, 0, 0, 0);
          padding: 0 30px;
          text-align: center;
          box-sizing: border-box;
          transition: all 1s;
          z-index: 1000;
        }
        .info-icon {
          display: none;
          color: #eee;
          position: absolute;
          right: 0;
          top: 0;
          font-size: 30px;
        }
      }
      .cell:hover {
        > .title {
          text-shadow: 0 0 1px #fff;
          background-color: rgba(0, 0, 0, 0.6);
          color: #fff;
          bottom: 0px;
          transition: all 0.6s;
        }
        .info-icon {
          display: inline-block;
          z-index: 1000;
        }
      }
      .cell:nth-child(n + 4) {
        margin-top: 20px;
      }
    }
  }
}
</style>
